<script setup lang="ts">
  import { PropType, watch, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance } from "element-plus";
  import permission from "@/components/permission.vue";
  const
    apis = ref(api.s),
    props = defineProps({
      modelValue: { type: Object as PropType<gt.sql.user>, default: format.def.user, },
      disabled: { type: Boolean, default: false }
    }),
    rules = ref({
      name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, }
    }),
    groupTree = ref<Tree<gt.sql.group>>([]),
    opt = ref({
      expandTrigger: "hover",
      checkStrictly: true,
      emitPath: false,
      value: "id",
      label: "name"
    }),
    entity = ref<FormInstance>();
  async function init() {
    groupTree.value = await gd.groupTree;
  }
  watch(() => props, init, { deep: true, immediate: true });
  function changePid() {
    if (!props.modelValue.gid) {
      props.modelValue.gid = "";
    }
  }
  defineExpose({
    validate() {
      return new Promise<boolean>((resolve) => {
        if (entity.value) {
          entity.value.validate().then(resolve).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="user xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <ElFormItem label="创建时间" prop="createTime"><el-input
        :modelValue="modelValue.createTime ? modelValue._createTime : '系统自动生成'" disabled /></ElFormItem>
    <ElFormItem label="微信id" prop="wxid"><el-input v-model="modelValue.wxid" placeholder="未绑定微信" disabled />
    </ElFormItem>
    <ElFormItem label="昵称" prop="name"><el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="disabled" />
    </ElFormItem>
    <div class="th x wf oh">
      <ElFormItem v-if="apis.distribution" label="隶属分组" prop="gid"><el-cascader v-model="modelValue.gid" :options="groupTree" :props="opt"
          :disabled="disabled" clearable collapse-tags-tooltip placeholder="请选择上级" @change="changePid" />
      </ElFormItem>
      <ElFormItem label="状态" prop="state"><el-switch v-model="modelValue.state" :disabled="disabled" :active-value="0"
          :inactive-value="1" /></ElFormItem>
      <ElFormItem v-if="apis.distribution" label="提成%" prop="commission"><el-input v-model="modelValue.commission" placeholder="请输入提成(%)"
          :disabled="disabled" /></ElFormItem>
    </div>

    <ElFormItem label="登录用户名" prop="username"><el-input v-model="modelValue.username" placeholder="请输入登录用户名"
        :disabled="disabled" /></ElFormItem>
    <ElFormItem label="密码" prop="password"><el-input v-model="modelValue.password" placeholder="如不修改请留空"
        :disabled="disabled" /></ElFormItem>
    <ElFormItem class="wf" label="权限" prop="permission">
      <permission v-model="modelValue.permission" :disabled="disabled" />
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
  .user {
    position: relative;
    >:not(.wf) {
      width: 49%;
    }
  }
</style>